<template>
  <div class="image-content-container">
    <!-- <img
      ref="thumbnail"
      v-show="imageLoaded === false"
      @click="preview(message)"
      v-bind:src="'data:video/jpeg;base64,' + message.messageContent.thumbnail"
    />
    <img
      ref="img"
      v-show="imageLoaded"
      @click="preview(message)"
      @load="onImageLoaded"
      v-bind:src="message.messageContent.remotePath"
    /> -->

    <!-- 缩略图 -->
    <div ref="thumbnail" v-show="!imageLoaded">
      <n-image
        @load="onImageLoaded"
        :src="'data:video/jpeg;base64,' + message.messageContent.thumbnail"
      ></n-image>
    </div>

    <div ref="img" v-show="imageLoaded">
      <n-image
        @load="onImageLoaded"
        :src="message.messageContent.remotePath"
      ></n-image>
    </div>
  </div>
</template>

<script>
import Message from '../../../../../wfc/messages/message'
import { previewMM } from '../../../../../platformHelper'
import { scaleDown } from '../../../../util/imageUtil'

export default {
  name: 'ImageMessageContentView',
  props: {
    message: {
      type: Message,
      required: true,
    },
    isInCompositeView: {
      default: false,
      type: Boolean,
      required: false,
    },
  },
  data() {
    return {
      imageLoaded: false,
    }
  },
  mounted() {
    let iw = this.message.messageContent.imageWidth
    let ih = this.message.messageContent.imageHeight
    if (iw && ih) {
      let size = scaleDown(iw, ih, 300, 300)
      if (size) {
        this.$refs.img.style.height = size.height + 'px'
        this.$refs.img.style.width = size.width + 'px'
        this.$refs.thumbnail.style.height = size.height + 'px'
        this.$refs.thumbnail.style.width = size.width + 'px'
      }
    }
  },
  methods: {
    onImageLoaded() {
      this.imageLoaded = true
    },
  },
}
</script>

<style lang="scss" scoped>
.image-content-container {
  margin: 0 10px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  overflow: hidden;

  :deep(.n-image) {
    width: 100%;
    height: 100%;
  }
}
</style>
